<template>
  <div style="background-color: #fff;height:6vh;padding:10px 20px;">
    <span style="font-size: 20px;line-height: 60px">用户管理</span>
    <el-button type="primary" style="float:right;margin-top: 10px;">新建用户</el-button>
    <el-card style="margin:10px;height:70px;">
      <el-form :inline="true">
        <el-form-item label="用户搜索" style="width: 270px;">
          <el-input placeholder="请输入用户名" v-model="searchUserForm.username" @keydown.enter="loadUserList"></el-input>
        </el-form-item>
        <el-form-item label="用户状态" style="width: 270px;">
          <el-select placeholder="请选择用户状态" v-model="searchUserForm.status" >
            <el-option label="启用" value="1"></el-option>
            <el-option label="禁用" value="0"></el-option>
          </el-select>
        </el-form-item>
        <el-form-item>
          <el-button @click="searchUser">重置</el-button>
          <el-button type="primary" @click="loadUserList">查询</el-button>
        </el-form-item>
      </el-form>
    </el-card>
    <el-card style="margin:10px;">
      <el-table :data="userArr">
        <el-table-column type="index" label="编号" width="80px" align="center"></el-table-column>
        <el-table-column label="用户名" prop="username" align="center"></el-table-column>
        <el-table-column label="手机号" prop="phone" align="center"></el-table-column>
        <el-table-column label="创建时间" prop="createTime" align="center"></el-table-column>
        <el-table-column label="用户状态" prop="status" align="center">
          <template #default="scope">
            <el-switch v-model="scope.row.status" inactive-value="0" active-value="1"></el-switch>
          </template>
        </el-table-column>
        <el-table-column label="操作" align="center">
          <template #default="scope">
            <el-button type="primary" link>密码重置</el-button>
            <el-button type="primary" link>编辑</el-button>
            <el-button type="danger" link>删除</el-button>
          </template>
        </el-table-column>
      </el-table>
    </el-card>
  </div>

  <el-dialog></el-dialog>
</template>

<script setup>

import {onMounted, ref} from "vue";
import axios from "axios";
import {ElMessage} from "element-plus";
import qs from "qs";
import response from "core-js/internals/is-forced";

const userArr = ref([]);
//存储
const searchUserForm=ref({username:'',status:''});
//加载
const loadUserList = () => {
  let data = qs.stringify(searchUserForm.value);
  axios.get(BASE_URL+'/v1/user/select?'+data)
      .then((response)=>{
        if(response.data.code===2000){
          ElMessage.success(response.data.message);
          userArr.value=response.data.data;
          console.log(userArr.value);
        }else{
          ElMessage.error(response.data.message);
        }
      })
};

onMounted(()=>{
  loadUserList();
})

//重置查询
const searchUser = ()=>{
  searchUserForm.value={username:'',status:''};
  loadUserList();
}

</script>

<style scoped>

</style>